<template>
  <div id="viewQuestionView">
    <a-row :gutter="[24, 24]">
      <a-col :md="12" :xs="24">
        <a-tabs default-active-key="question">

          <a-tab-pane key="question" title="题目">
            <a-card v-if="question" :title="question.title">
              <a-descriptions title="标签" />
                <a-space wrap>
                  <a-tag v-for="(tag, index) of question.tagsText" :key="index" color="green">{{ tag }}
                  </a-tag>
                </a-space>
              <br><br>
              <MdViewer :value="question.content || ''" />
              <a-descriptions title="判题条件" :column="{ xs: 1, md: 2, lg: 3 }">
                <a-descriptions-item label="时间限制">
                  {{ question.judgeConfig?.timeLimit ?? 0 }}
                </a-descriptions-item>
                <a-descriptions-item label="内存限制">
                  {{ question.judgeConfig?.memoryLimit ?? 0 }}
                </a-descriptions-item>
              </a-descriptions>
              <br>
              <span style="font-size: 13px;">通过次数:{{ question.acceptedNum }} |提交次数:{{ question.submitNum }} |点赞数:{{
                question.thumbNum }}</span>
              <template #extra>
                <a-space wrap>
                  <a-tag color="green">
                    {{ question.difficultyText }}
                  </a-tag>
                  <!-- <a-tag v-for="(tag, index) of question.tags" :key="index" color="green">
                    {{ tag }}
                  </a-tag> -->
                </a-space>
              </template>
            </a-card>
          </a-tab-pane>

          <a-tab-pane v-if="question?.isQueried==0" key="comment" title="答案">
            <a-card v-if="answer" :title="answer.title">
              <a-space direction="vertical" fill>
                <a-descriptions title="详细说明">
                  <a-descriptions-item>
                    {{ answer.content }}
                  </a-descriptions-item>
                </a-descriptions>
                <a-descriptions title="代码">
                  <a-descriptions-item>
                    {{ answer.code }}
                  </a-descriptions-item>
                </a-descriptions>
              </a-space>
            </a-card>
            <a-card v-if="answer==null">
              <a-space direction="vertical" fill>
                <a-descriptions title="暂无答案">
                </a-descriptions>
              </a-space>
            </a-card>
          </a-tab-pane>
        </a-tabs>
      </a-col>
      <a-col :md="12" :xs="24">
        <a-form :model="form" layout="inline">
          <a-form-item field="language" label="编程语言" style="min-width: 240px">
            <a-select v-model="form.language" :style="{ width: '120px' }" placeholder="选择编程语言">
              <a-option v-for="item of languageList" :value="item.value" :label="item.text" />
            </a-select>
            <a-button type="primary" class="but" @click="toSubmitView">提交记录</a-button>
          </a-form-item>
        </a-form>
        <CodeEditor :value="form.code as string" :language="form.language" :handle-change="changeCode" />
        <a-divider size="0" />
        <a-button type="primary" style="min-width: 200px" @click="doSubmit">
          提交代码
        </a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watchEffect, withDefaults, defineProps } from "vue";
import message from "@arco-design/web-vue/es/message";
import CodeEditor from "@/components/CodeEditor.vue";
import MdViewer from "@/components/MdViewer.vue";
import {
  QuestionControllerService,
  SubmitControllerService,
  SubmitAddRequest,
  QuestionVO,
  CommonControllerService,
  QuestionAnswerControllerService,
  QuestionAnswerVO,
} from "../../../generated";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
interface Props {
  id: string;
}

const router = useRouter();
const store = useStore();
/**
 * 跳转到提交记录 页面
 * @param question
 */
const toSubmitView = () => {
  router.push({
    path: `/question_submit`,
  });
};

const props = withDefaults(defineProps<Props>(), {
  id: "",
});

const question = ref<QuestionVO>();
const languageList = ref(
  "" as any
)

const loadData = async () => {
  const res = await QuestionControllerService.getQuestionVoByIdUsingGet(
    props.id as any
  );
  const res2 = await CommonControllerService.getEnumsListUsingGet('语言分类');
  const res3 = await QuestionAnswerControllerService.getAnswerVoByIdUsingGet(
    props.id as any
  );
  answer.value = res3.data;
  languageList.value = res2.data
  if (res.code === 0) {
    question.value = res.data;
  } else {
    message.error("加载失败，" + res.message);
  }
};

const form = ref<SubmitAddRequest>({
  language: undefined,
  code: "",
});

const answer = ref<QuestionAnswerVO>({
  title: "",
  content: "",
  code: "",
})

/**
 * 提交代码
 */
const doSubmit = async () => {
  if (!question.value?.id) {
    return;
  }

  const res = await SubmitControllerService.submitQuestionUsingPost({
    ...form.value,
    questionId: question.value.id,
  });
  if (res.code === 0) {
    message.success("提交成功");
  } else {
    message.error("提交失败," + res.message);
  }
  toSubmitView();
};

/**
 * 页面加载时，请求数据
 */
onMounted(() => {
  loadData();
});

const changeCode = (value: string) => {
  form.value.code = value;
};
</script>

<style>
#viewQuestionView {
  max-width: 1400px;
  margin: 0 auto;
}


#viewQuestionView .arco-space-horizontal .arco-space-item {
  margin-bottom: 0 !important;
}
.but{
  text-align: right;
  left: 190%;
}
</style>
